<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
        <div id="app">
            <button @click='authOz'>授权 </button>

            <a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxecdbc07080c2fced&redirect_uri=https%3A%2F%2Fproject.yumendianzi.com%2Fwxpay%2FgetOpenId&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"> 获取授权信息 </a>
                <div>
                    <input v-model="totel" placeholder="支付金额" />
                    <button @click='onBridgeReady'>支付</button>
                </div>
               
             
        </div>
   
    <script>
        
        function my_axios (method,url,params,data,){
            console.log(method,url)
            return new Promise((resolve,reject)=>{
                axios({
                    url:url,
                    method:method,
                    headers:{'Content-Type': 'application/json'},
                    params:params,
                    data:data
                }).then(res=>{
                    resolve(res.data)
                }).catch(err=>{
                    reject(err)
                })
            })
        }

            new Vue({
            el: '#app',
            data() {
                return{
                    totel:1
                }
                
            },
            methods: {
                authOz() {
                    console.log('auth1')
                 
                    my_axios('get','https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxecdbc07080c2fced&redirect_uri=https%3A%2F%2Fproject.yumendianzi.com%2Fwxpay%2FgetOpenId&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect=https%3A%2F%2Fbaidu.com',).then(res=>{
                        console.log('ax',res)
                    })
                    // axios.get('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxecdbc07080c2fced&redirect_uri=https%3a%2f%2f%2fstatic%2fget&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect').then(res=>{
                    //     console.log('res',res)
                    // }).catch(err=>{
                    //     console.log('err',err)
                    // })
                },
                onBridgeReady() {
                    console.log(this.totel)
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                            "appId": "wx2421b1c4370ec43b",     //公众号名称，由商户传入     
                            "timeStamp": "1395712654",         //时间戳，自1970年以来的秒数     
                            "nonceStr": "e61463f8efa94090b1f366cccfbbb444", //随机串     
                            "package": "prepay_id=u802345jgfjsdfgsdg888",
                            "signType": "MD5",         //微信签名方式：     
                            "paySign": "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
                        },
                            function (res) {
                                if (res.err_msg == "get_brand_wcpay_request:ok") {
                                    // 使用以上方式判断前端返回,微信团队郑重提示：
                                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                }
                            });
                        if (typeof WeixinJSBridge == "undefined") {
                            if (document.addEventListener) {
                                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                            } else if (document.attachEvent) {
                                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                            }
                        } else {
                            onBridgeReady();
                        }
                    },
                }
            })
                
    </script>
</body>
</html>